<template>
  <uni-nav-bar title="积分" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="space-between package" style="background: linear-gradient(-66deg, #FDF4F6, #FCFBFF, #ECF3FE);">
    <view class="direction-start" style="justify-content:space-around;height:244rpx;">
      <view>当前积分</view>
      <view style="font-size: 78rpx;">{{userInfo.integral}}</view>
      <view class="but" @click="navTo('pointsMall/exchange')">兑换商品>></view>
    </view>
    <view class="direction-start" style="align-items: flex-end;justify-content:space-around;height:244rpx;">
      <view style="color:#666;" @click="navTo('pointsMall/integral')">积分明细</view>
      <image src="../../static/mine/jf.png" mode="" style="width:201rpx;height:161rpx;margin-right: 30rpx;"></image>
    </view>
  </view>
  <view class="package" :style="{ height: pageHeight + 'px',padding:'0px',overflow:'hidden' }">
    <view class="center" style="border-bottom:1px solid #eee;padding:20rpx 0px 10rpx;box-sizing: border-box;">
      <view class="column list" v-for="(item,index) in list" :key="item.name" @click="change(index)">
        <view :style="{color:current===index?'#333':'#666'}">{{item.name}}</view>
        <view :style="{background:current===index?'#1B91FF':'#fff'}"></view>
      </view>
    </view>
    <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
      :style="{ height: pageHeights + 'px' }">
      <view class="space-between" style="padding:20rpx;box-sizing: border-box;flex-wrap: wrap;">
        <view class="direction-start shop" v-for="item in orderLists" :key="item.id"
          @click="navTo('pointsMall/integralDetail?id='+item.id)">
          <image :src="item.image" mode="" style="width:100%;height: 330rpx;"></image>
          <view class="direction-start" style="padding:10rpx;box-sizing: border-box;width:100%;">
            <view class="title">{{item.name}}</view>
            <view class="center">
              <text style="color:#1B91FF;font-size: 38rpx;margin-right: 10rpx;">{{item.score}}</text>
              积分
            </view>
            <view style="color:#999;font-size: 24rpx;">库存：{{item.stock}}</view>
          </view>
        </view>
      </view>
      <Popu v-if="orderLists.length<1" :pageHeight="'30vh'" text="暂无商品"></Popu>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { getGoodsList } from '@/gql/integral';
  import { toPublish } from '@mqtt';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  const list = [{ name: '实体商品' }, { name: '虚拟商品' }]
  const current = ref(0)
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  const pageHeights = ref()
  userInfo.integrate()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 233).toString();
      pageHeights.value = (pageHeight.value - 60).toString();
    },
  });
  init()
  function init() {
    isLoading.value = true;
    const payload = {
      query: getGoodsList,
      variables: {
        page: currentPage.value,
        goods_type: current.value + 1
      },
    };
    toPublish(
      'ql/score/getGoodsList',
      payload,
      (obj : any) => {
        const { getGoodsList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getGoodsList.list];
        lastPage.value = getGoodsList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function change(index : number) {
    current.value = index
    orderLists.value = []
    currentPage.value = 1
    init();
  }
</script>

<style scoped lang="less">
  .but {
    width: 188rpx;
    height: 56rpx;
    border: 1px solid #3EA3F4;
    border-radius: 5px;
    color: #3EA3F4;
    text-align: center;
    line-height: 56rpx;
    margin-top: 20rpx;
  }

  .list {
    width: 200rpx;
    color: #666;

    view:nth-of-type(2) {
      width: 67rpx;
      height: 8rpx;
      margin-top: 10rpx;
      border-radius: 5px;
    }
  }

  .shop {
    width: 49%;
    box-shadow: 0px 2px 23px 0px rgba(224, 224, 224, 0.64);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 15rpx;
  }

  .title {
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>